<template>
  <basic-container class="MobileDevice">
    <div class="form">
      <div v-for="(item,index) in config" :key="index" class="row">
        <div class="title">{{ item.name }}</div>
        <div class="input">
          <span>
            功能状态
          </span>
          <el-switch v-if="item.type==='switch'"
                     v-model="detail[item.key]"
                     v-bind="switchConfig">
          </el-switch>
        </div>
        <div v-for="(item2,index) in item.children" :key="index" class="child">
          <div>{{ item2.name }}</div>
          <el-input v-if="item2.type==='input'"
                    class="el-input_class"
                    type="number"
                    :size="'small'"
                    v-model="detail[item2.key]">
          </el-input>
          <div>{{ item2.text }}</div>
        </div>
        <div class="text">
          {{ item.text }}
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-button :disabled="disabled" type="primary" @click="submit">
        提交
      </el-button>
    </div>
  </basic-container>
</template>

<script>
import { getSystemTypeDic, getDetail, submit } from '@/api/system/MobileDevice'

export default {
  name: 'MobileDevice',
  mounted () {
    this.getSystemTypeDic()
  },
  data () {
    return {
      disabled: false,
      systemTypeList: [],
      switchConfig: {
        activeText: '开',
        inactiveText: '关',
        activeValue: 1,
        inactiveValue: 0
      },
      config: [{
        name: '认领',
        type: 'switch',
        key: 'claimStatus',
        text: '功能状态设置为关闭，移动端任务无需认领'
      }, {
        name: '转交',
        type: 'switch',
        key: 'deliverStatus',
        text: '功能状态设置为关闭，移动端任务无转交操作'
      }, {
        name: '退回',
        type: 'switch',
        key: 'returnStatus',
        text: '功能状态设置为关闭，移动端任务不能操作退回'
      }, {
        name: '自定义检查内容',
        key: 'customContentStatus',
        type: 'switch',
        text: '功能状态设置为关闭，移动端任务不能添加自定义检查内容'
      },
        //   {
        //   name: '检查数据暂存',
        //   key: 'draftStatus',
        //   type: 'switch',
        //   text: '功能状态设置为关闭，移动端检查任务不暂存检查数据'
        // },
        {
          name: '检查补录',
          key: 'checkMakeupStatus',
          type: 'switch',
          text: '功能状态设置为关闭，移动端检查任务不进行检查位置判断，不允许补录',
          children: [{
            name: '检查位置限制距离',
            key: 'checkDistance',
            type: 'input',
            text: '数值为0，功能默认关闭'
          }]
        }, {
          name: '自建任务关联计划任务',
          key: 'taskAssPlan',
          type: 'switch',
          text: '功能状态设置为关闭，移动端创建的自建任务直接创建，不关联已有的计划任务'
        }],
      detail: {}
    }
  },
  methods: {
    getSystemTypeDic () {
      this.disabled = true
      getSystemTypeDic().then(value => {
        this.systemTypeList = value.data.data
        this.getDetail(this.systemTypeList[0].dictKey)
        this.disabled = false
      })
    },
    getDetail (params) {
      getDetail({ systemType: params }).then(value => {
        this.detail = value.data.data
      })
    },
    submit () {
      this.disabled = true
      const params = {
        ...this.detail
      }
      const find = this.systemTypeList.find(value => {
        return value.dictKey.toString() === this.detail.systemType.toString()
      })
      if (find) {
        params.systemType = find.dictKey
        submit(params).then(value => {
          this.$message.success(value.data.msg)
          this.getSystemTypeDic()
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.MobileDevice {
  .row {
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 10px;
    margin: 20px 0;
    position: relative;

    > .title {
      color: #999999;
      font-size: 14px;
      position: absolute;
      top: -10px;
      left: 30px;
      background-color: #fff;
      padding: 0 20px;
      height: 20px;
    }

    > .input {
      margin: 10px 0;
    }

    > .child {
      display: flex;
      align-items: center;

      .el-input_class {
        margin: 0 10px;
        width: 100px !important;
      }
    }

    > .text {
      color: #F59A23;
      font-size: 14px;
    }
  }
}
</style>
